import React, { useEffect, useState } from 'react'
import TableHoc from '@/HigherFunctions/TableHoc'
import { columns } from './columns'
import { Table, Modal, message } from 'antd'
import { ExclamationCircleFilled } from '@ant-design/icons';
import ShowInfo from './components/info'
import { remoteList, deleteInfo } from '@/api/system/menu'
import { IMenu } from './types';
const { confirm } = Modal;

const Menu = (props: any) => {
    const [list, setList] = useState<Array<object>>([])
    const [loading, setLoading] = useState<boolean>(false);
    const [info, setInfo] = useState<object>({});
    const [showModal, setShowModal] = useState<boolean>(false);
    //初始化
    useEffect(() => {
        search();
    }, [])
    //搜索
    const search = async () => {
        setLoading(true)
        try {
            setList([])
            let res = await remoteList({});
            let { data } = res;
            setList(data || [])
        } finally {
            setLoading(false)
        }
    };
    //编辑信息
    const showInfo = (info: IMenu, type: string = 'edit'): void => {
        if (type == 'edit') {
            setInfo(info)
        } else {
            setInfo({})
        }
        setShowModal(true)
    }
    //删除信息
    const removeInfo = (info: IMenu): void => {
        let { menuId, menuName } = info;
        confirm({
            title: '操作提示',
            icon: <ExclamationCircleFilled />,
            content: `确定要删除 ${menuName} 菜单?`,
            cancelText: '取消',
            okText: '确定',
            onOk: async () => {
                try {
                    await deleteInfo({ ids: [menuId] });
                    message.success('操作成功')
                    search()
                } catch (err) {
                    message.error('操作失败')
                }
            }
        });
    }
    return (
        <div className='main_body'>
            <Table
                columns={columns(showInfo, removeInfo)}
                dataSource={list}
                loading={loading}
                rowKey={'menuId'}
                bordered
                scroll={{ x: 1000 }}
                pagination={false}
            ></Table>
            {
                showModal && <ShowInfo list={list} info={info} submit={() => { setShowModal(false); search(); }} close={() => setShowModal(false)} />
            }
        </div>
    )
}

export default TableHoc(Menu);
